<template>
    <div class="center-info">
        <div class="head">个人信息</div>
        <div class="card">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">头像</div>
                        <div class="cell-content">
                            <el-upload :accept="'image/png,image/gif,image/jpeg,image/jpg,image/bmp'" :show-file-list="false" :action="action" :multiple="false" :data="data" :on-success="uploadSuccessFun">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <span class="avatar-uploader" v-else>修改头像</span>
                            </el-upload>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="cell" style="height: 1.25rem;">
                        <div class="cell-label">入职</div>
                        <div class="cell-content">
                            <span>{{ userInfo.rz_time || 0 }}天</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">账号</div>
                        <div class="cell-content">
                            <span>{{ userInfo.username || '' }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">职位</div>
                        <div class="cell-content">
                            <span>{{ userInfo.profession || '' }}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">部门</div>
                        <div class="cell-content">
                            <span>{{ userInfo.bm_title || '' }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">职级</div>
                        <div class="cell-content">
                            <span>{{ userInfo.zhiji || '' }}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">姓名</div>
                        <div class="cell-content">
                            <span>{{ userInfo.name || '' }}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">性别</div>
                        <div class="cell-content">
                            <el-radio v-model="sex" label="男">男</el-radio>
                            <el-radio v-model="sex" label="女">女</el-radio>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">生日</div>
                        <div class="cell-content">
                            <el-date-picker v-model="birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="cell">
                        <div class="cell-label">手机号</div>
                        <div class="cell-content">
                            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="card-bottom">
                <div class="card-btn" @click="submitFun">保存</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getUserInfo,updateUser } from '@/api/common';
import CONFIG from "@/utils/config"
import _cache from "@/utils/cache"
export default {
    data() {
        return {
            action:CONFIG.baseURL + "api/upload",
            data:{
                token:_cache.get("token") || '',
            },

            userInfo: {},
            imageUrl: '',
            sex: '男',
            birthday: '',
            phone: ''

        };
    },
    mounted() {
        this.getUserInfoFun();
    },
    methods: {
        getUserInfoFun() {
            getUserInfo().then(res => {
                if (res.code == 200) {
                    this.userInfo = res.data;
                    this.imageUrl = res.data.image || '';
                    this.sex = res.data.sex || '男';
                    this.birthday = res.data.birthday || '';
                    this.phone = res.data.mobile || '';
                }
            })
        },
        submitFun() {
            if (!this.imageUrl) {
                return this.$message.error('请上传头像');
            }
            if (!this.sex) {
                return this.$message.error('请选择性别');
            }
            if (!this.birthday) {
                return this.$message.error('请选择生日');
            }
            if (!this.phone) {
                return this.$message.error('请输入手机号');
            }

            let data = {
                image: this.imageUrl,
                sex: this.sex,
                birthday: this.birthday,
                mobile: this.phone
            }
            updateUser(data).then(res => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.$store.dispatch('vuex_get_user_info');
                }
            })
        },
        uploadSuccessFun(res){
            if(res.code == 200){
                this.imageUrl = res.data.path;
            }else{
                this.$message.error(res.msg);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.center-info {
    /deep/.el-radio__input.is-checked .el-radio__inner {
        border-color: #4F8AF8;
        background: #4F8AF8;
    }

    /deep/.el-radio__input.is-checked+.el-radio__label {
        color: #4F8AF8;
    }

    .card {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 0px 0.15rem 0.0125rem rgba(0, 0, 0, 0.08);
        padding: 0.5rem;

        .cell {
            display: flex;
            align-items: center;
            padding: 0.2125rem 0;

            .cell-label {
                width: 1rem;
                font-size: 0.2rem;
                color: #000;
            }

            .cell-content {
                font-size: 0.2rem;
                color: #000;

                .avatar {
                    width: 1.25rem;
                    height: 1.25rem;
                    border-radius: 50%;
                }

                .avatar-uploader {
                    display: block;
                    width: 1.25rem;
                    height: 1.25rem;
                    background: rgba(#000, 0.55);
                    border-radius: 50%;
                    text-align: center;
                    line-height: 1.25rem;
                    font-size: 0.2rem;
                    color: #fff;
                }
            }
        }

        .card-bottom {
            display: flex;
            justify-content: center;
            padding: 0.5rem;

            .card-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
                height: 0.5rem;
                background: #4F8AF8;
                border-radius: 0.1rem;
                cursor: pointer;
                user-select: none;
                font-size: 0.2rem;
                color: #fff;
            }
        }
    }
}
</style>